<template>
    <div id="app">
        <!-- Echarts 图表 -->
        <div ref="progressChart" class="progressChart"></div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

// 定义 progressChart 类型
const progressChart = ref<HTMLDivElement | null>(null);

onMounted(() => {
    // 确保 ref 已被初始化
    if (progressChart.value) {
        const chart = echarts.init(progressChart.value);

        const option = {
            // 鼠标移入提示工具
            tooltip: {
                trigger: 'axis',
                formatter(params: any) {
                    if (params[1].data && params[0].data) {
                        return `<div>开始时间：${params[1].data}</div>` + `<div>结束时间：${params[0].data}</div>`;
                    } else {
                        return '';
                    }
                },
                axisPointer: {
                    type: 'shadow',
                },
            },
            title: {
                text: '项目进度',
                left: 'left',  // 设置标题在左侧
                top: 'top',    // 设置标题在顶部
                textStyle: {
                    color: '#2c3e50', // 修改标题颜色
                    fontSize: 18,     // 标题字体大小
                },
            },
            grid: {
                containLabel: true,
                show: false,
                right: 80,
                left: 40,
                bottom: 0,
                top: 60,
                backgroundColor: '#fff',
            },
            legend: {
                // 图例组件
                data: ['持续时间'],
                align: 'auto',
                top: 'bottom',
            },
            xAxis: {
                type: 'time', // 使用时间类型
                position: 'top', // x 轴位置
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: true,
                },
                axisLabel: {
                    formatter(value: number) {
                        const date = new Date(value);
                        // 格式化为 "YYYY-MM-DD"
                        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
                    },
                    // 设置间隔以减少标签的显示数量
                    interval: (index: number) => (index % 2 === 0 ? 0 : 1), // 每隔一个标签显示
                },
            },
            yAxis: {
                inverse: true, // y 轴数据翻转
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: ['可行性', '项目立项', '设计审图', '施工准备', '工程建设', '竣工验收'],
            },
            series: [
                {
                    name: '持续时间',
                    type: 'bar',
                    stack: 'duration',
                    itemStyle: {
                        color: '#c9161b',
                        borderColor: '#fff',
                        borderWidth: 1,
                    },
                    zlevel: -1,
                    data: [
                        '2021-01-31',
                        '2021-02-25',
                        '2021-03-25',
                        '2021-04-01',
                        '2021-04-10',
                        '2021-05-25',
                    ], // 结束时间
                },
                {
                    name: '持续时间',
                    type: 'bar',
                    stack: 'duration', // 堆叠标识符
                    itemStyle: {
                        color: '#fff',
                    },
                    zlevel: -1,
                    z: 9,
                    data: [
                        '2021-01-01',
                        '2021-01-31',
                        '2021-02-25',
                        '2021-03-25',
                        '2021-04-01',
                        '2021-04-10',
                    ], // 开始时间
                },
            ],
        };

        chart.setOption(option);

        // 图表大小自适应
        window.addEventListener('resize', () => {
            chart.resize();
        });
    }
});
</script>

<style scoped>
.progressChart {
    width: 100%;
    height: 360px;
}
</style>
